<template>
	<el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules">
			<!-- <el-form-item label="会员ID" :label-width="formLabelWidth" prop="memberId">
                <el-input
                        v-model="form.memberId"
                        autocomplete="off"
                        placeholder="请输入会员ID"
                ></el-input>
            </el-form-item> -->
			<el-form-item label="银行卡号" :label-width="formLabelWidth" prop="cardNum">
				<el-input v-model="form.cardNum" autocomplete="off" @blur="getBank" placeholder="请输入银行卡号"></el-input>
			</el-form-item>
			<el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
				<el-input v-model="form.realName" autocomplete="off" placeholder="请输入真实姓名"></el-input>
			</el-form-item>
			<el-form-item label="所属银行" :label-width="formLabelWidth" prop="bankName">
				<el-select filterable clearable v-model="form.bankName" placeholder="请选择所属银行">
					<el-option v-for="(item, index) in bankList" :key="index" :label="item.bankName" :value="item.bankName"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="支行名称(分行)" :label-width="formLabelWidth" prop="openAccount">
				<el-input v-model="form.openAccount" autocomplete="off" placeholder="请输入开户行名称(分行)"></el-input>
			</el-form-item>
			<el-form-item label="支行所在省市" :label-width="formLabelWidth" prop="city">
				<el-input v-model="form.city" autocomplete="off" placeholder="请输入支行所在省市"></el-input>
			</el-form-item>
			<el-form-item label="预留手机号" :label-width="formLabelWidth" prop="phone">
				<el-input v-model="form.phone" autocomplete="off" placeholder="请输入银行预留手机号"></el-input>
			</el-form-item>
			<el-form-item label="银行卡照片" :label-width="formLabelWidth" prop="cardUrl">
				<fortress-upload :limit="1" returnType="string" type="image" name="cardUrl" :formData="form"></fortress-upload>
			</el-form-item>
			<el-form-item label="卡片有效期" :label-width="formLabelWidth" prop="validDate">
				<el-input v-model="form.validDate" autocomplete="off" placeholder="请输入卡片有效期"></el-input>
			</el-form-item>
			<el-form-item label="卡类型" :label-width="formLabelWidth" prop="cardType">
				<fortress-select
					v-model="form.cardType"
					:dictList="BankCardTypeList"
					placeholder="请选择卡类型"
					clearable
				></fortress-select>
			</el-form-item>
			<!--			<el-form-item label="银行类型" :label-width="formLabelWidth" prop="bankType">-->
			<!--				<el-input v-model="form.bankType" autocomplete="off" placeholder="请输入银行类型"></el-input>-->
			<!--			</el-form-item>-->
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
			<el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>
<script>
import { memberbankcardInfo, memberbankcardSave, memberbankcardEdit } from "@/api/member/memberbankcard.js"
import { getByNum } from "@/api/system/bank.js"
import { enumList } from "@/api/public.api.js"
import * as ftVal from "@/common/fortressValidator.js"
import request from "@/common/request"

export default {
	props: {
		id: {
			type: [String, Number],
			default: "",
		},
	},
	data() {
		return {
			visible: false,
			form: {
				memberId: "",
				cardNum: "",
				realName: "",
				openAccount: "",
				bankName: "",
				phone: "",
				cardUrl: "",
				validDate: "",
				cardType: "",
				bankType: "",
				city: "",
			},
			formLabelWidth: "120px",
			rules: {
				phone: [{ validator: ftVal.validatePhone, trigger: "blur" }],
			},
			BankCardTypeList: [],
			bankList: [],
		}
	},
	created() {},
	methods: {
		async getBankList() {
			try {
				const { code, data, msg } = await request("get", "/system/bank/list")
				if (code != 0) {
					throw new Error(msg)
				}
				this.bankList = data
			} catch (error) {
				console.log(error)
			}
		},
		getBank() {
			if (this.form.cardNum) {
				getByNum(this.form.cardNum).then(resp => {
					if (resp.code == 0) {
						this.form.bankName = resp.data.bankName
						this.form.cardType = resp.data.cardType + ""
					}
				})
			}
		},
		queryEnumList() {
			this.BankCardTypeList = []
			enumList("BankCardType", "").then(resp => {
				if (resp.code == 0) {
					this.BankCardTypeList = resp.data
				}
			})
		},
		init(id) {
			this.resetForm()
			this.queryEnumList()
			this.getBankList()
			//修改
			if (id) {
				memberbankcardInfo(id).then(resp => {
					if (resp.code == 0) {
						this.$nextTick(() => {
							this.form = {
								...this.form,
								...resp.data,
							}
						})
					} else {
						this.$msg({
							message: resp.msg,
							type: "error",
						})
					}
				})
			}
			this.visible = true
		},
		//提交表单数据
		submitForm() {
			this.$refs["form"].validate(valid => {
				if (valid) {
					//修改
					if (this.form.id) {
						memberbankcardEdit(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
						//新增
					} else {
						this.form.memberId = this.id
						memberbankcardSave(this.form).then(resp => {
							if (resp.code == 0) {
								this.$message({
									type: "success",
									message: "操作成功!",
								})
								this.$emit("refreshData")
								this.visible = false
							} else {
								this.$msg({
									message: resp.msg,
									type: "error",
								})
							}
						})
					}
				} else {
					console.log("error submit!!")
					return false
				}
			})
		},
		resetForm() {
			this.form = {
				memberId: "",
				cardNum: "",
				realName: "",
				openAccount: "",
				bankName: "",
				phone: "",
				cardUrl: "",
				validDate: "",
				cardType: "",
				bankType: "",
				city: "",
			}
			this.$nextTick(() => {
				if (this.$refs["form"]) {
					this.$refs["form"].resetFields()
				}
			})
		},
	},
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
	height: auto;
	max-height: 274px;
	padding: 7px;
	overflow: hidden;
	overflow-y: auto;
	font-weight: normal;
}
</style>
